Mobile: Accessibility: Add checked/unchecked accessibility information to the "sort notes by" dialog #11411
Conversation
|
|
||
| return ( | ||
| <View style={styles.buttonContainer}> | ||
| <TouchableRipple |
There was a problem hiding this comment.
This pull request switches from a React Native Paper Button to a TouchableRipple. Unlike <Button>, TouchableRipple allows providing a custom accessibilityState. This allows communicating whether the button represents a checked/unchecked menu item.
On web, aria-checked seems necessary — react-native-web seems to ignore the accessibilityState's checked option.
| @@ -112,6 +117,9 @@ function extraStyles(theme: BaseTheme) { | |||
| keyboardAppearance: theme.appearance, | |||
| color5: theme.color5 ?? theme.backgroundColor4, | |||
| backgroundColor5: theme.backgroundColor5 ?? theme.color4, | |||
|
|
|||
| backgroundColorHover4: Color(theme.color4).alpha(0.12).rgb().string(), | |||
There was a problem hiding this comment.
backgroundColorHover4 determines the ripple/hover color for the <TouchableRipple> menu item component. This use of Color matches how additional theme colors are added for the desktop app. For example,
Line 111 in d7b3ef8
Additionally, .alpha(0.12) should match React Native's <Button> hover color.
personalizedrefrigerator
added
mobile
Summary
This pull request is a follow-up to #11395. Previously, TalkBack on Android did not read whether an item in the "sort notes by" dialog was checked/unchecked, making it difficult to determine the current sort order.
This pull request exposes the checked/unchecked state to accessibility tools through React Native's
accessibilityStateprop.See also #11395, #10795.
Testing plan
Android 13: